<template>
	<div class="q-pa-md q-gutter-sm">
		<q-table :rows="tableData" :columns="columns" row-key="name" v-model:pagination="pagination" :loading="loading"
			@request="onRequest" :rows-per-page-options="[15]" separator="vertical" dense class="custom-table">

			<!-- 新增标题插槽 -->
			<template v-slot:top>
				<div class="table-header">
					<h2 class="table-title">
						财报流程信息
						<span class="sub-title">Financial Report Process</span>
					</h2>
					<q-icon name="assignment" class="header-icon" />
				</div>
			</template>
			<template v-slot:header="props">
				<q-tr :props="props">
					<q-th auto-width>下单操作</q-th>
					<q-th auto-width>流程控制</q-th>
					<q-th v-for="col in props.cols" :key="col.name" :props="props">
						{{ col.label }}
					</q-th>
				</q-tr>
			</template>

			<template v-slot:body="props">
				<q-tr :props="props">

					<q-td auto-width>
						<q-btn color="red" label="下单" @click="xiad(props.row)" size="sm"
							v-if="props.row.有无下单 == false" />
						<q-btn color="brown-3" label="已经下单" disable size="sm" v-if="props.row.有无下单 == true" />
					</q-td>

					<q-td auto-width>
						<q-btn color="accent" label="流程拉回" size="sm" class="q-mr-md" @click="doForceDrawBack(props.row)"
							:disable="props.row.当前节点 == 2420 ? true : false" />
						<q-btn color="positive" label="流程归档" size="sm" @click="doForceOver(props.row)"
							:disable="props.row.当前节点 == 2422 ? true : false" />
					</q-td>

					<q-td key="当前节点" :props="props">
						<q-badge :color="props.row.当前节点 == 2420 ? 'positive' : 'accent'">
							{{ props.row.当前节点 == 2420 ? "内审" : "归档" }}
						</q-badge>
					</q-td>

					<q-td key="标题" :props="props">
						{{ props.row.标题 }}
					</q-td>

					<q-td key="公司名称" :props="props">
						{{ props.row.公司名称 }}
					</q-td>

					<q-td key="发起日期" :props="props">
						{{ props.row.发起日期 }}
					</q-td>

					<q-td key="财报" :props="props">
						<!-- <a v-for="(i, index) in props.row.财报" :key="index" :href="caibaolink(rops.row.财报)" >{{caibaoname(rops.row.财报)}}</a> -->
						<div v-for="(i, index) in props.row.财报" :key="index">
							<a :href="caibaolink(i)" class="q-pa-md" style="color: blue;">{{ caibaoname(i) }}</a>
						</div>
					</q-td>

				</q-tr>
			</template>

		</q-table>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			//分页参数设置
			pagination: {
				sortBy: 'desc',
				descending: false,
				page: 1,
				rowsPerPage: 15,
				rowsNumber: 0
			},
			tableData: [
			],
			columns: [
				{ name: '当前节点', align: 'center', label: '当前节点', field: '当前节点' },
				{ name: '标题', align: 'center', label: '标题', field: '标题' },
				{ name: '公司名称', align: 'center', label: '公司名称', field: '公司名称' },
				{ name: '发起日期', align: 'center', label: '发起日期', field: '发起日期' },
				{ name: '财报', align: 'center', label: '财报', field: '财报' },
			],
			selectRow: null,
			showEdit: false,
		}
	},
	async created() {

	},
	async mounted() {
		this.$q.loading.show()
		var a = await this.$API.riskbrain.GetDataPaging.get(this.pagination.page, this.pagination.rowsPerPage)
		this.tableData = a.resultData;
		this.pagination.rowsNumber = a.total;
		this.$q.loading.hide()
	},
	methods: {
		//流程归档
		async doForceOver(data) {
			this.$q.loading.show()
			var a = await this.$API.riskbrain.doForceOver.post(data);
			var b = await this.$API.riskbrain.GetDataPaging.get(this.pagination.page, this.pagination.rowsPerPage);
			this.tableData = b.resultData;
			this.$q.loading.hide()
		},

		//流程收回
		async doForceDrawBack(data) {
			this.$q.loading.show()
			var a = await this.$API.riskbrain.doForceDrawBack.post(data);
			var b = await this.$API.riskbrain.GetDataPaging.get(this.pagination.page, this.pagination.rowsPerPage);
			this.tableData = b.resultData;
			this.$q.loading.hide()
		},

		caibaoname(data) {
			return data.name;
		},
		caibaolink(data) {
			return data.link
		},
		async xiad(data) {
			this.$q.loading.show()
			console.log(data)
			var a = await this.$API.riskbrain.PlaceAnOrder.post(data);
			console.log(a);
			this.$q.notify({
				message: a,
				color: 'purple'
			})
			var b = await this.$API.riskbrain.GetDataPaging.get(this.pagination.page, this.pagination.rowsPerPage);
			this.tableData = b.resultData;
			this.$q.loading.hide()
		},
		async onRequest(props) {
			this.loading = true;
			var a = await this.$API.riskbrain.GetDataPaging.get(props.pagination.page, props.pagination.rowsPerPage)
			console.log(a)
			this.tableData = a.resultData;
			this.pagination.page = a.page;
			this.pagination.rowsNumber = a.total;
			this.loading = false;
		}
	}
}
</script>

<style lang="scss">
// 在原有样式基础上新增标题样式
.table-header {
	padding: 16px;
	background: linear-gradient(145deg, #f8f9fa, #ffffff);
	border-radius: 8px 8px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	overflow: hidden;

	&::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, #2196F3 0%, #4CAF50 100%);
	}
}

.table-title {
	margin: 0;
	font-size: 24px;
	color: #2c3e50;
	display: flex;
	flex-direction: column;

	.sub-title {
		font-size: 14px;
		color: #7f8c8d;
		margin-top: 4px;
		font-weight: normal;
	}
}

.header-icon {
	font-size: 32px;
	color: #2196F3;
	opacity: 0.8;
}

.custom-table {
	// 表格容器样式
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;

	// 表头样式
	thead th {
		font-size: 16px;
		font-weight: 600;
		color: #2c3e50;
		background-color: #f8f9fa;
	}

	// 单元格样式
	td {
		transition: background-color 0.3s;

		&:hover {
			background-color: #f3f4f6;
		}
	}

	// 按钮组样式
	.q-btn {
		transition: all 0.2s;

		&::before {
			box-shadow: none;
		}

		&:hover {
			transform: translateY(-1px);
		}
	}

	// 财报链接样式
	a[href] {
		text-decoration: none;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 1px;
			background: blue;
			transition: width 0.3s;
		}

		&:hover::after {
			width: 100%;
		}
	}

	// 分页器样式
	.q-table__bottom {
		padding-top: 20px;
		justify-content: flex-end;
	}
}
</style>